<template>
  <div class="container">
    <div class="container_page">
      <page-header :title="$t('wallet_wallet')">
        <div style="display: flex; justify-content: space-between;">
          <span class="transaction" @click="toTransactionRecord">{{
            $t('wallet_transactionRecord')
          }}</span>
        </div>
      </page-header>
      <!-- <div class="wallet_title">{{ $t('wallet_addBankTitle') }}</div> -->
      <div class="bank_card" style="  margin-top: var(--gap);">
        <div class="title" v-if="bankInfo.bankNo">
          <div style=" padding: 2px;   margin-right: 8px;" class="flex_center">
            <img
              :src="bankIconMap[bankInfo.bankName.toLowerCase() || 'default']"
            />
          </div>
          <span>{{ bankInfo.bankName }}</span>
        </div>
        <div class="title" v-else>
          <span>{{ $t('wallet_addBankCard') }}</span>
        </div>
        <div class="date" v-if="bankInfo.bankNo">
          <img :src="require('@/assets/img/wallet/ic_default2@2x.png')" />
          <span>{{ $t('wallet_default') }}</span>
          <span> {{ formateDate(bankInfo.bankExpire) }}</span>
        </div>
        <div class="date" v-else>
          <span>{{ $t('wallet_addBankHint') }}</span>
        </div>
        <div class="bank_account" v-if="bankInfo.bankNo">
          **** **** **** {{ bankInfo.bankNo || '' }}
        </div>
        <div style="margin:10px 0 ;" v-else>
          <img :src="require('@/assets/img/wallet/is_no.png')" style="width:180px;" />
        </div>
        <div class="bank_action">
          <div class="bank_btn" @click="toBindVISA" v-if="!bankInfo.bankNo">
            {{ $t('wallet_addCard') }}
          </div>
          <div
            class="bank_btn"
            @click="
              isShowUnbindDialog = true
              renfundType = 'bank'
            "
            v-else
          >
            {{ $t('wallet_remove') }}
          </div>
        </div>
        <img
          class="bank_logo"
          :src="require('@/assets/img/wallet/ic@2x1.png')"
        />
      </div>
      <!-- <div class="wallet_title" style="padding: 16px 26px 10px 26px;">
        {{ $t('wallet_depositTitle') }}
      </div>
      <div class="deposit_card" v-if="info">
        <div class="title">
          <img :src="require('@/assets/img/wallet/wallet_ic_deposit@2x.png')" />
          <span>{{ $t('wallet_deposit') }}</span>
        </div>
        <div class="brief">
          {{ $t('wallet_depositHint') }}
        </div>
        <div class="action">
          <div class="deposit_money">
            {{ info.depositAmount | amountFormats($currencyVal.symbol) }}
          </div>
          <div
            class="bank_btn"
            v-if="info.depositAmount > 0"
            @click="
              isShowRefundDialog = true
              renfundType = 'deposit'
            "
          >
            {{ $t('wallet_refund') }}
          </div>
          <div class="bank_btn" @click="toPay" v-else>
            {{ $t('wallet_addDeposit') }}
          </div>
        </div>
        <img
          class="deposit_logo"
          :src="require('@/assets/img/wallet/ic_line@2x.png')"
        />
      </div>
      <div class="wallet_title" style="padding: 16px 26px 10px 26px;">
        {{ $t('Payment_method') }}
      </div>
      <div class="wallet_card" v-if="info.cardList && info.cardList.length > 0">
        <div
          class="wallet_card_list"
          v-for="item in info.cardList"
          :key="item.id"
        >
          <img
            class="wallet_card_icon"
            :src="bankIconMap[item.bankName.toLowerCase() || 'default']"
            alt=""
            :style="item.expire ? 'opacity: 0.4;' : ''"
          />
          <div class="wallet_card__lists">
            <div
              class="wallet_card_bankNo"
              :style="item.expire ? 'opacity: 0.4;' : ''"
            >
              **** **** **** {{ item.bankNo || '' }}
              <span v-show="item.expire"> · {{ $t('Expired') }}</span>
            </div>
            <img
              class="wallet_card_btn"
              src="@/assets/img/wallet/wallet_ic_set@2x.png"
              alt=""
              @click="handleBnak(item)"
            />
          </div>
        </div>
      </div>
      <div class="wallet_btn" @click="toBindVISA">
        <span>{{ '+ ' + $t('Add_Payment_method') }}</span>
      </div> -->
      <!-- 退款 -->
      <van-dialog v-model="isShowRefundDialog" :showConfirmButton="false">
        <div class="title">{{ $t('wallet_refund') }}</div>
        <div class="brief">
          {{ $t('dialog_Refund_Message') }}
        </div>
        <div class="btns">
          <div class="btn flex_center" @click="isShowRefundDialog = false">
            {{ $t('public_notNow') }}
          </div>
          <div class="btn flex_center" @click="toRefund('eamilFormRef')">
            {{ $t('home_confirm') }}
          </div>
        </div>
      </van-dialog>
      <!-- 退款失败 -->
      <van-dialog v-model="isShowRefundError" :showConfirmButton="false">
        <div class="title">{{ $t('public_notice') }}</div>
        <div class="brief">
          {{ $t(refundErrorTipMap[refundErrorTip]) }}
        </div>
        <div class="btns">
          <div
            class="btn flex_center"
            @click="isShowRefundError = false"
            v-if="refundErrorTip == 'isUnpaid'"
          >
            {{ $t('profile_cancel') }}
          </div>
          <div class="btn flex_center" @click="handleRefundError">
            {{
              refundErrorTip == 'isUnpaid'
                ? $t('home_gotoPay')
                : $t('home_confirm')
            }}
          </div>
        </div>
      </van-dialog>
      <!-- 解绑提示 -->
      <van-dialog v-model="isShowUnbindDialog" :showConfirmButton="false">
        <div class="brief" style="padding-top: var(--gap);">
          {{ $t('wallet_confirmRmCard') }}
        </div>
        <div class="btns">
          <div class="btn flex_center" @click="isShowUnbindDialog = false">
            {{ $t('profile_cancel') }}
          </div>
          <div class="btn flex_center" @click="unBindVISA">
            {{ $t('home_confirm') }}
          </div>
        </div>
      </van-dialog>
      <!-- 解绑错误提示 -->
      <van-dialog v-model="isShowUnbindError" :showConfirmButton="false">
        <div class="brief" style="padding-top: var(--gap);">
          {{ $t(unBindErrorTipMap[unBindErrorTip]) }}
        </div>
        <div class="btns">
          <div
            class="btn flex_center"
            @click="isShowUnbindError = false"
            v-if="refundErrorTip == 'isUnpaid'"
          >
            {{ $t('profile_cancel') }}
          </div>
          <div class="btn flex_center" @click="handleRefundError">
            {{ this.unPaidInfo ? $t('home_gotoPay') : $t('home_confirm') }}
          </div>
        </div>
      </van-dialog>
    </div>
  </div>
</template>

<script>
import $api from '@/assets/js/api/index'
import share from '@/mixins/share'
// import thsDialog from "../../components/dialog/index";
export default {
  mixins: [share],
  data () {
    return {
      info: {
        cardList: []
      },
      isShowRefundDialog: false,
      isShowRefundError: false,
      isShowUnbindDialog: false,
      isShowUnbindError: false,
      refundErrorTip: '',
      refundErrorTipMap: {
        isRent: 'Dialog_Refund_Message1',
        isSurveying: 'Dialog_Refund_Message3',
        isUnpaid: 'Dialog_Refund_Message2'
      },
      unBindErrorTip: '1',
      unBindErrorTipMap: {
        1: 'Dialog_Refund_Message1',
        2: 'Dialog_Refund_Message2',
        3: 'Dialog_Refund_Message3',
        4: 'Dialog_DeleteCard_Message1', //子账号有未支付订单
        5: 'Dialog_DeleteCard_Message2', //子账号有调查中的订单
        6: 'Dialog_DeleteCard_Message3' //子账号有租借中的订单
      },
      bankIconMap: {
        visa: require('@/assets/img/bank/visa.png'),
        master: require('@/assets/img/bank/mastercard@2x.png'),
        mastercard: require('@/assets/img/bank/mastercard@2x.png'),
        maestro: require('@/assets/img/bank/Maestro.png'),
        unionpay: require('@/assets/img/bank/unionpay@2x.png'),
        mnp: require('@/assets/img/bank/Group 216.png'),
        jcb: require('@/assets/img/bank/jcb.png'),
        default: require('@/assets/img/bank/default.png')
      },
      unPaidInfo: null,
      // bankInfo: {}
    }
  },
  created () {
    this.getLang()
  },
  methods: {
    handleRefundError () {
      if (this.refundErrorTip == 'isUnpaid') {
        this.$router.push({
          path: '/pay/way',
          query: {
            type: this.unPaidInfo.lost ? 7 : 1,
            orderNo: this.unPaidInfo.orderNo
          }
        })
      }
      this.isShowRefundError = false
      this.isShowUnbindError = false
    },
    formateDate (value) {
      if (!value) return '--'
      if (value.length != 5) value = '0' + value
      return this.$t('wallet_expiryDate') + ' ' + value
    },
    toTransactionRecord () {
      this.$router.push({ path: '/pay/list' })
    },
    toPay () {
      this.$router.push({
        path: '/pay/way',
        query: { type: 5 }
      })
    },
    async checkIsOrderIng () {
      const res = await $api.order.getOrderIng()
      if (res.code != '0') {
        this.global.toast(res.message)
        return
      }
      const isRent = res.data.rent.length > 0
      const isSurveying = res.data.surveying.length > 0
      const isUnpaid = res.data.unpaid.length > 0
      if (isRent) return 'isRent'
      if (isSurveying) return 'isSurveying'
      if (isUnpaid) {
        this.unPaidInfo = res.data.unpaid[0]
        return 'isUnpaid'
      }

      return false
    },
    async toRefund () {
      const isNoOrder = await this.checkIsOrderIng()
      if (!isNoOrder) {
        const res = await $api.user.refundDepositt(2)

        if (res.code != '0') {
          this.global.toast(res.message)
          return
        }
        this.isShowRefundDialog = false
        this.getWalletInfo()
        this.$router.push('/pay/refund-tip')
      } else {
        this.isShowRefundDialog = false
        this.refundErrorTip = isNoOrder
        this.isShowRefundError = true
      }
    },
    getWalletInfo () {
      return $api.user.getWallet().then(res => {
        if (res.code != '0') {
          this.global.toast(res.message)
          return
        }
        this.info = res.data
      })
    },
    handleBnak (item) {
      this.bankInfo = item
      this.isShowUnbindDialog = true
      this.renfundType = 'bank'
    },
    toBindVISA () {
      localStorage.setItem('actionType', 'back')
      this.$router.push({ path: '/wallet/bind' })
    },
    async unBindVISA () {
      this.refundErrorTip = await this.checkIsOrderIng()
      $api.user.unBindBankCard({ id: this.bankInfo.id }).then(res => {
        if (res.code != '0') {
          this.global.toast(res.message)
          return
        }
        this.isShowUnbindDialog = false
        if (res.data.result == 0) this.getWalletInfo()
        else {
          this.unBindErrorTip = res.data.result
          if (this.renfundType == 'bank')
            this.unBindErrorTip = this.unBindErrorTip + 3

          // console.log(this.unBindErrorTip)
          this.isShowUnbindError = true
        }
      })
    }
  },
  async mounted () {
    this.getWalletInfo()
    this.refundErrorTip = await this.checkIsOrderIng()
  },
  computed: {
    bankInfo () {
      let info = { bankName: '', bankNo: '', bankExpire: '' }
      if (!this.info || this.info.cardList.length == 0) return info
      info = this.info.cardList[0]
      return info
    }
  }
}
</script>
<style scoped lang="scss">
.container_page {
  margin: 0;
  background-color: var(--page-bg);
  width: 100%;
  flex: 1;
  box-sizing: border-box;
}
.transaction {
  color: var(--text-color);
  font-size: 14px;
  font-weight: 500;
}
.wallet_title {
  padding: 20px 24px 0 24px;
  font-size: 17px;
  font-weight: 600;
  text-align: left;
  color: var(--text-color);
  line-height: 20px;
}
.wallet_card {
  margin: 0 20px;
  background: #ffffff;
  border-radius: 10px;
  .wallet_card_list {
    height: 58px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    .wallet_card_icon {
      width: 44px;
      height: 44px;
      margin: 7px 16px;
      object-fit: contain;
    }
    .wallet_card__lists {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-right: 20px;
      .wallet_card_bankNo {
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        color: #39404d;
        line-height: 16px;
      }
      .wallet_card_btn {
        width: 17px;
        height: 17px;
      }
    }
    .wallet_card__lists_active {
      border-bottom: 1px solid red;
    }
  }
}
.wallet_btn {
  margin: 16px;
  margin-top: 32px;
  span {
    background: var(--text-color);
    border-radius: 26px;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    line-height: 20px;
    padding: 16px 24px;
  }
}
.deposit_card,
.bank_card {
  position: relative;
  margin: 0 20px;
  padding: 20px 16px 16px 28px;
  border-radius: 20px;
  color: #ffffff;
  box-sizing: border-box;
  .title {
    display: flex;
    align-items: center;
    img {
      width: 26px;
      height: 16px;
    }
    span {
      font-size: 14px;
      font-weight: 500;
    }
    margin-bottom: 12px;
  }
}
.bank_card {
  margin-bottom: 14px;
  background-image: linear-gradient(141deg, #39404d, #666b75);
  .date {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
    img {
      width: 12px;
      height: 12px;
      margin-right: 4px;
    }
    span {
      font-size: 9px;

      margin-right: 8px;
    }
  }
  .bank_account {
    font-size: 23px;
    font-weight: Bold;
  }
  .bank_action {
    text-align: right;
  }
  .bank_logo {
    position: absolute;
    top: 20px;
    right: 28.55px;
    width: 48.32px;
    height: 36px;
  }
}
.deposit_card {
  background-image: linear-gradient(141deg, #666d82, #bcbfc8);
  .title {
    margin-bottom: 8px;
    img {
      width: 16px;
      height: 16px;
      margin-right: 6px;
    }
  }
  .brief {
    font-size: 9px;
    margin-bottom: 10px;
    width: 200px;
    line-height: 12px;
  }
  .deposit_logo {
    position: absolute;
    right: 0;
    top: 0;
    width: 80px;
    height: 90px;
  }
  .action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .deposit_money {
      font-size: 23px;
      font-weight: Bold;
    }
  }
}
.bank_btn {
  border: 0.5px solid #ffffff;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 26.5px;
  display: inline-block;
}
</style>
